<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Test</title>
    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
</head>
<body>
    <h1>WebSocket Connection Test</h1>
    <div id="status">Connecting...</div>
    <div id="logs"></div>

    <script>
        const logs = document.getElementById('logs');
        const status = document.getElementById('status');
        
        function log(message) {
            console.log(message);
            logs.innerHTML += '<div>' + new Date().toISOString() + ': ' + message + '</div>';
        }

        // 测试生产环境连接
        log('Connecting to production WebSocket...');
        
        const socket = io('wss://c4pad.fun/realtime', {
            path: '/socket.io',
            transports: ['websocket'],
            upgrade: false,
            rememberUpgrade: false,
            forceNew: true,
        });

        socket.on('connect', () => {
            log('Connected to production WebSocket');
            status.textContent = 'Connected';
            
            // 测试加入聊天
            socket.emit('join_chat', { username: 'TestUser' + Math.floor(Math.random() * 1000) });
        });

        socket.on('disconnect', (reason) => {
            log('Disconnected: ' + reason);
            status.textContent = 'Disconnected';
        });

        socket.on('connect_error', (error) => {
            log('Connection error: ' + error.message);
            status.textContent = 'Error';
        });

        socket.on('connected', (data) => {
            log('Server connected event: ' + JSON.stringify(data));
        });

        socket.on('user_joined', (data) => {
            log('User joined: ' + JSON.stringify(data));
        });

        socket.on('online_users', (data) => {
            log('Online users: ' + JSON.stringify(data));
        });

        socket.on('username_taken', (data) => {
            log('Username taken: ' + JSON.stringify(data));
            // 重试不同用户名
            socket.emit('join_chat', { username: 'TestUser' + Math.floor(Math.random() * 10000) });
        });
    </script>
</body>
</html>
